Date-Input Form Fields: UX Design Guidelines日期輸入欄位

日期輸入欄位的設計關係重大，設計不當可能導致使用者體驗受阻。糟糕的設計不僅會讓使用者放棄填寫表單，還可能因日期輸入錯誤而造成預訂失敗。

本文探討如何最佳化日期輸入功能，重點關注移動裝置和國際化需求，並詳細介紹輸入模式、錯誤處理及本地化設計。

日期輸入模式

日曆選擇器（Calendar Pickers）

日曆選擇器展示整月的日曆，通常顯示在移動應用中，介面頂部標註星期幾，其設計模仿桌面或掛曆的形態。

日曆選擇器適合選擇較接近當前時間的日期（如一年以內）。但對於選擇未來較遠日期的使用者，頻繁的導航會讓人感到煩躁，此時直接輸入年份會更加快捷。

日曆選擇器對選擇日期範圍尤其有用，例如並排顯示兩個月份的介面設計：

案例：Expedia。Expedia 使用柔和的藍色高亮顯示選擇的出發和返回日期範圍，出發日期和返回日期以不同顏色區分。

滾動日期選擇器（Scrolling Date Pickers）

滾動日期選擇器常見於移動裝置，但在日期範圍較多的情況下會令人厭煩。滾動小範圍列表費時低效，不如直接允許使用者輸入日期。

案例：Todoist 應用。iPhone 版 Todoist 應用允許使用者透過滾動列表或直接輸入日期來設定任務截止日期。對於較近的截止日期（如“今天”），滾動列表有效；但對於更遠的日期，直接輸入會更高效。

分拆式下拉選單（Split Dropdown Fields）

分拆的下拉選單將日期欄位分為月份、日期和年份分別選擇。這種方法增加了不必要的步驟，提高了互動成本。

案例：DeviantArt。DeviantArt 使用了分拆式下拉選單，但這種設計導致過多點選和滾動操作，降低了效率，不推薦使用。

直接輸入日期（Typing the Date）

直接輸入日期是最基礎的輸入方法，在很多情況下也是最有效的，尤其是選擇較遠的過去（如生日）或未來日期時。建議即使提供其他輸入方法，也應允許使用者直接輸入日期。

針對有限日期選項，提供適用日期列表

在某些情況下，使用者的日期選擇非常有限。例如，Google Express 的線上雜貨配送服務透過短列表提供可選配送日期，不可用的日期會被灰顯或直接隱藏。

案例：Google Express。提供了明確的日期選項，並將不可用日期灰顯處理。

但對於超過 10 個選項的日期，不建議使用這種方法，因為使用者難以瀏覽過長的日期列表。

不強制使用者輸入特殊字元格式

使用者輸入的日期格式（如短劃線、空格、斜線或點號分隔的日期）應被系統接受。此外，左側的零也不應影響輸入結果。

案例：Priceline。Priceline 拒絕了使用者輸入的9-3-17，而接受了09/08/17，儘管表單沒有顯示任何格式要求。這種設計應改進為自動解析使用者輸入的日期格式。

適當報告錯誤

當使用者輸入明顯錯誤的日期（如11/81/17）時，不要做出假設，而是提供反饋和解決建議。

移除不合理的日期選項

避免使用者選擇不合理的日期。例如：

將不合理選項灰顯處理或禁用，幫助使用者明確可選範圍。

儲存使用者輸入

如果表單其他部分或後續任務中需要相同的日期資訊，避免使用者重複輸入。

確保日期範圍一致

在選擇出發和返回日期時，避免範圍的突兀變化。例如：如果出發日期顯示的是“11月-12月”，則返回日期不應直接切換到“12月-1月”，以免使用者混淆。

案例：Southwest Airlines。在 Southwest Airlines 的日期選擇器中，使用者選擇了出發日期8-16-16，但返回日期範圍從“7月-8月”變為“8月-9月”，這種變化可能被使用者忽視，導致錯誤選擇。

支援國際使用者的日期格式

日期輸入欄位的設計應適應文化差異。例如，“10/11/2016”對美國使用者可能是“2016年10月11日”，但對歐洲使用者可能是“2016年11月10日”。

新增標籤和分離欄位：明確標識每個欄位分別對應的月份、日期和年份。

拼寫出月份名稱：避免與日期混淆。

案例：Tep Wireless 使用完整的月份拼寫為全球使用者提供清晰的日期選擇。

案例：Eurostar 未明確日期格式，導致歧義。

利用帶月份名稱的日曆選擇器：

案例：Bootstrap 日曆選擇器拼寫了月份名稱，使用者能夠明確日期選擇。

案例：Ctrip（英文版）未拼寫月份名稱，使用者需自行推斷。

日期輸入模式因上下文而異。選擇適合場景的設計模式，同時支援文字輸入，並考慮是否有國際化使用者。避免模糊設計，以防止使用者的挫敗感和表單放棄率上升。遵循這些指南可以有效避免使用者錯誤並提高整體體驗。